<template>
  <div>

    <div class="cu-list menu" :infinite-scroll-disabled="scrollDisabled "
         style="overflow: auto">
      <div v-for="(item,index) in dataSource" :key="item.id" class="cu-item" @click="viewNotice(item)">
        <div class="content flex justify-between cursor">
          <span class="flex-sub ">{{ item.title }}</span>
          <span class="text-grey text-sm">{{ autoInterceptFormatDate(item.createTime) }}</span>
        </div>
      </div>
    </div>

    <el-pagination
        :page-size="page.size"
        layout="prev, pager, next"
        page-count="4"
        :total="page.total"
        @change="loadDataSource"
    />

    <el-dialog :modal="false" v-model="noticeDetailDialog.visible"
               :title="noticeDetailDialog.title"
               :before-close="closeNoticeDetailDialog"
               destroy-on-close
               draggable>
      <div class=""
           v-if="startTools.hasVal(noticeDetailDialog.formModel.content)&&noticeDetailDialog.formModel.content.length>0"
           v-html="noticeDetailDialog.formModel.content" style="min-height: 300px"></div>
      <el-empty v-else description="暂无内容"></el-empty>
    </el-dialog>
  </div>
</template>
<script>
import {getUserViewNoticeById, pageUserNotices} from "@/api/sys/sysNoticeApi";
import {deepClone} from "utils/util";
import {autoInterceptFormatDate} from "utils/startFormatUilts";
import startTools from "utils/startTools";


export default {
  name: "userNoticeTable",
  computed: {
    startTools() {
      return startTools
    },
    scrollDisabled() {
      return this.page.total >= this.dataSource.length
    }
  },
  data() {
    return {

      page: {
        current: 1,
        size: 10,
        total: 0,
      },
      loadStatus: false,
      dataSource: [],
      noticeDetailDialog: {
        visible: false,
        formModel: {},
      },
    }
  },
  created() {
    this.loadDataSource()
  },
  methods: {
    autoInterceptFormatDate,


    loadDataSource() {
      if (this.loadStatus) {
        return;
      }
      this.loadStatus = true

      pageUserNotices(deepClone(this.page)).then(res => {
        let data = res.data.data;
        this.dataSource = data.records || []
        this.page.total = data.total
      }).finally(() => {
        this.loadStatus = false;
      })
    },
    viewNotice(row) {
      getUserViewNoticeById(row.id).then(res => {
        let data = res.data.data || {}
        this.noticeDetailDialog.formModel = data
        this.noticeDetailDialog.title = data.title;
        this.noticeDetailDialog.visible = true;
      })
    },
    closeNoticeDetailDialog() {
      this.noticeDetailDialog.visible = false;
      this.noticeDetailDialog.title = "";
      this.noticeDetailDialog.formModel = {}
      this.loadDataSource();
    }
  }
}
</script>
<style lang="scss" scoped>

.infinite-list {
  height: 500px;
  padding: 0;
  margin: 0;
  list-style: none;

  .infinite-list-item {
    display: flex;
    justify-content: space-between;
    height: 50px;


    color: var(--el-color-primary);

  }

  .infinite-list-item + .list-item {
    margin-top: 10px;
  }
}


</style>